<template>
  <a-modal :width="modalWidth" :visible="visible" :confirmLoading="confirmLoading" wrapClassName="ant-modal-cust-warp"
    :footer="null" @cancel="visible=false" class="configSettingModal">
    <div class="configSettingModal">
      <!-- 流程标题 -->
      <div class="steps">
        <div class="title">信息配置流程</div>
        <div class="stepsWrap">
          <a-steps progress-dot :current="current" direction="vertical" @change="currentChange">
          <a-step v-for="(step,index) in steps" :key="index" :title="step.title"></a-step>
        </a-steps>
        </div>
      </div>
      <!-- 流程内容 -->
      <div class="settings">
        <div class="title">{{steps[current].title}}</div>
        <component :is="comName" class="componentWrap" @ok="close" @currentChange="currentChange($event)" :parkInfo="parkInfo"></component>
        <div class="buttons">

        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
  import ParkArmInfoDeployModel from '../parkInfoDeploy/ParkArmInfoDeployModel.vue'
  import ConfigParkInfoModal from './configParkInfo/modules/ConfigParkInfoModal'
  import ConfigParkChargeModal from './configParkCharge/modules/ConfigParkChargeModal'
  import ConfigParkThroughModal from './configParkThrough/modules/ConfigParkThroughModal'
  import ConfigMonthlCard from '../parking/parkmonthly/modules/MonthlyCarConfigModal'
  export default {

    name: "ConfigSettingModal",
    components: {
      ParkArmInfoDeployModel,
      ConfigParkInfoModal,
      ConfigParkChargeModal,
      ConfigParkThroughModal,
      ConfigMonthlCard
    },
    data() {
      return {
        steps: [
          {
            title: '识别参数信息配置',
            comName: 'ConfigParkInfoModal'
          },
          {
            title: '出入口信息配置',
            comName: 'ParkArmInfoDeployModel'
          },
          {
            title: '计费规则信息配置',
            comName: 'ConfigParkChargeModal'
          },
          {
            title: '通行设置',
            comName: 'ConfigParkThroughModal'
          }
        ],
        current: 0,
        modalWidth: 1200,
        visible: false,
        confirmLoading: false,
        parkInfo:null
      }
    },
    methods: {
      open: function (currentIndex = 0,selected) {
        this.parkInfo = selected;
        this.current = currentIndex;
        this.visible = true;

        if (this.parkInfo.chargeFeeEdition === 2) {
          //是新版月租车场
          this.steps = [{
            title: '出入口信息配置',
            comName: 'ParkArmInfoDeployModel'
          },
            {
              title: '识别参数信息配置',
              comName: 'ConfigParkInfoModal'
            },
            {
              title: '计费规则信息配置',
              comName: 'ConfigParkChargeModal'
            },
            {
              title: '通行设置',
              comName: 'ConfigParkThroughModal'
            },
            {
              title: '月卡配置',
              comName: 'ConfigMonthlCard'
            }
          ]
        }else{
          this.steps = [{
            title: '出入口信息配置',
            comName: 'ParkArmInfoDeployModel'
          },
            {
              title: '识别参数信息配置',
              comName: 'ConfigParkInfoModal'
            },
            {
              title: '计费规则信息配置',
              comName: 'ConfigParkChargeModal'
            },
            {
              title: '通行设置',
              comName: 'ConfigParkThroughModal'
            }
          ]
        }
      },
      currentChange: function (current) {
        this.current = current;
      },
      close(){
        this.visible = false;
      }
    },
    computed: {
      comName: function () {
        return this.steps[this.current].comName;
      }
    }
  }
</script>

<style>
  .configSettingModal {
    display: flex;
  }
  .configSettingModal .ant-modal-content{
    background-color: transparent;
  }
  .configSettingModal .ant-modal-body{
    padding:0;
  }

  .configSettingModal .steps {
    width: 20%;
    background-color: #fff;
    border-radius: 4px;

  }
  .configSettingModal .stepsWrap{
    display:flex;
    justify-content: center;
    margin-top:50px;
  }
  .configSettingModal .title{
    border-bottom:1px solid rgba(216, 216, 216, 1);
    line-height: 60px;
    font-size:16px;
  }
  .configSettingModal .steps .title{
    text-align: center;
  }
  .configSettingModal .settings .title{
    text-indent: 20px;
  }

  .configSettingModal .settings {
    width: 79%;
    border-radius: 4px;
    margin-left:1%;
    background-color:#fff;
  }
  .configSettingModal .ant-steps-dot .ant-steps-item-content{
    width:auto;
  }
  .configSettingModal .ant-steps{
    width:auto;
  }
  .configSettingModal .ant-steps-item-active .ant-steps-item-title{
    color:#1890ff!important;
    font-weight: bold;
  }
  .configSettingModal .componentWrap{
    padding:20px;
  }
</style>